<template>
    <div class="app-container"
         v-loading.fullscreen.lock="allLoading"
         element-loading-text="拼命处理中,请耐心等待"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <el-dialog :close-on-click-modal="false" :title="mainDialogInfo.title" :visible.sync="showDialog"
                   width="100%" append-to-body @close="closeDialog">
            <el-form ref="form" :disabled="changeBitFlagIsNone" :model="form" :rules="rules" label-width="120px">
            </el-form>
            <el-tabs v-model="form.activeName">
                <template
                    v-for="(templateModel,groupName) in form.data"
                >
                    <el-tab-pane
                        :disabled="form.loading"
                        :label="formatTabName(groupName)"
                        :name="groupName"
                        :key="groupName"
                    >
                        <el-tabs v-model="templateModel.groupActiveName">
                            <el-tab-pane
                                :disabled="form.loading"
                                v-for="(value, key) in templateModel.templateMap"
                                :label="key"
                                :name="key"
                                :key="key"
                            >
                                <el-button size="mini" type="primary" @click="handleClipboard(value,$event)">复制代码</el-button>
                                <pre><code class="hljs" v-html="highlightedCode(value, key)"></code></pre>
                            </el-tab-pane>
                        </el-tabs>
                    </el-tab-pane>
                </template>
            </el-tabs>
            <div slot="footer" class="dialog-footer">
                <template v-if="!changeBitFlagIsNone">
                    <el-button type="primary" @click="submitMainDialog">确 定</el-button>
                </template>
                <el-button @click="cancelMainDialog">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {sksDialogFormMixin} from "sks-plugin-el-erp/lib/dialog-form";
import request from "/src/utils/request";

import hljs from "highlight.js/lib/highlight";
import "highlight.js/styles/github-gist.css";
hljs.registerLanguage("java", require("highlight.js/lib/languages/java"));
hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("html", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("vue", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("javascript", require("highlight.js/lib/languages/javascript"));
hljs.registerLanguage("sql", require("highlight.js/lib/languages/sql"));


// 预览生成的分组代码
export function groupPreviewTable(tableId) {
    return request({
        url: '/tool/gen/groupPreview/' + tableId,
        method: 'get'
    })
}


export default {
    name: "ShowPreviewCodeDialog",
    mixins: [
        sksDialogFormMixin,
    ],
    data() {
        return {
            defaultForm: {
                loading: true,
                data: {},
                activeName: ""
            },
            defaultFormNotNull: {
                data: {},
            },

            rules: {
            },
        };
    },
    methods:{
        initMainDialogInfo(){
            return {
                title: '代码预览',
            }
        },
        showByTableId({tableId,extra,dialogInfo,virtualChangeBitFlag=this.sksUtils.CHANGE_BIT_FLAG.none}){
            groupPreviewTable(tableId).then(res=>{
                this.show({
                    extra: extra,
                    form: this.sksUtils.mergeFromObject({},{
                        data: res.data,
                        activeName: Object.keys(res.data)[0]||'',
                        loading: false,
                        virtualChangeBitFlag: virtualChangeBitFlag,
                    }),
                    dialogInfo: dialogInfo
                })
            })
        },
        validateSuccess() {
            let data = this.sksUtils.mergeFromObject({}, this.form);

            if (!this.sksUtils.isNullOrUndefined(this.mainDialogInfo.submitCallback)) {
                this.mainDialogInfo.submitCallback({submitData: data, ref: this})
                //this.showDialog=false
                return
            }
            switch(data.virtualChangeBitFlag) {
                case this.sksUtils.CHANGE_BIT_FLAG.add:
                    this.closeDialog()
                    this.sksUtils.msgSuccess("新增成功");
                    //此处换成新增接口 start
                    //新增接口返回新增后的数据
                    let saRes={
                        data: this.sksUtils.mergeFromObject({},data,{
                            id: 1000,
                        })
                    }
                    //此处换成新增接口 end
                    if (!this.sksUtils.isNullOrUndefined(this.mainDialogInfo.submitCallbackSuccess)){
                        this.mainDialogInfo.submitCallbackSuccess({resData: saRes.data})
                    }
                    break;
                case this.sksUtils.CHANGE_BIT_FLAG.modify:
                    this.closeDialog()
                    this.sksUtils.msgSuccess("修改成功");
                    if (!this.sksUtils.isNullOrUndefined(this.mainDialogInfo.submitCallbackSuccess)){
                        this.mainDialogInfo.submitCallbackSuccess({resData: data})
                    }
                    break;
                default:
                    this.sksUtils.msgError("未知的变更标识");
                    break;
            }
        },
        formatTabName(groupNum){
            if(groupNum=='crud'){
                return '单表'
            }
            if(groupNum=='tree'){
                return '树表'
            }
            if(groupNum=='sub'){
                return '主子表'
            }
            return groupNum
        },
        /** 高亮显示 */
        highlightedCode(code, key) {
            const vmName = key.substring(key.lastIndexOf("/") + 1, key.length);
            var language = vmName.substring(vmName.indexOf(".") + 1, vmName.length);
            const result = hljs.highlight(language, code || "", true);
            return result.value || '&nbsp;';
        },
    }
}
</script>

<style scoped>

</style>
